<template>
  <inline-Modal
    :visible="visible"
    :title="title"
    @ok="$emit('ok')"
    @cancel="
      () => {
        $emit('cancel');
      }
    "
  >
    <a-form :form="form">
      <a-card title="账号信息" :bordered="false" style="width: 100%">
        <div class="headText">初始化密码为用户账号</div>
        <a-row>
          <a-col span="12">
            <a-form-item
              label="用户账号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                placeholder="请输入用户账号"
                v-decorator="[
                  'userNameId',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入用户账号！',
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item
              label="用户姓名"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                placeholder="请输入用户姓名"
                v-decorator="[
                  'userName',
                  {
                    rules: [
                      {
                        required: true,
                        min: 1,
                        message: '请输入用户姓名！',
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col span="12">
            <a-form-item
              label="用户昵称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                placeholder="请输入用户昵称"
                v-decorator="['nickName']"
              />
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item
              label="用户性别"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <t-dict-select-tag
                type="select"
                dictCode="UserSex"
                placeholder="请选择用户性别"
                v-decorator="[
                  'userSex',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择用户性别！',
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col span="12">
            <a-form-item
              label="用户年龄"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input-number
                style="width: 100%;"
                placeholder="请输入用户年龄"
                :min="0"
                :max="200"
                v-decorator="['userAge']"
              />
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item
              label="电子邮箱"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                placeholder="请输入电子邮箱"
                v-decorator="[
                  'userEmail',
                  {
                    rules: [
                      {
                        pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                        message: '请输入正确的邮箱！',
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col span="12">
            <a-form-item
              label="所属组织"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <depart-popup
                placeholder="请选择所属组织"
                v-decorator="[
                  'userOrgId',
                  { rules: [{ required: true, message: '请选择所属组织！' }] },
                ]"
                @change="departPopupChange"
              ></depart-popup>
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item
              label="直属主管"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <personnel-popup
                placeholder="请选择直属主管"
                v-decorator="[
                  'userReportsTo',
                  { rules: [{ required: true, message: '请选择直属主管！' }] },
                ]"
              ></personnel-popup>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col span="12">
            <a-form-item
              label="用户岗位"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select
                mode="multiple"
                placeholder="请选择用户岗位"
                @change="handlePositionChange"
                v-model="positionArr"
              >
                <a-select-option
                  v-for="item in positionList"
                  :key="item.uuid"
                  placeholder="Please select"
                >
                  {{ item.positionText }}
                </a-select-option>
              </a-select>
              <a-input
                v-decorator="[
                  'userPosition',
                  { rules: [{ required: true, message: '请选择用户岗位！' }] },
                ]"
                disabled
                type="hidden"
              />
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item
              label="用户角色"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select
                mode="multiple"
                placeholder="请选择用户角色"
                :defaultValue="authGroupArr"
                @change="selectUserGroupName"
              >
                <a-select-option v-for="item in authGroup" :key="item.id">
                  {{ item.roleName }}
                </a-select-option>
              </a-select>
              <a-input
                v-decorator="[
                  'userGroup',
                  { rules: [{ required: true, message: '请选择用户角色！' }] },
                ]"
                disabled
                type="hidden"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col span="12">
            <a-form-item
              label="入职时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <t-date
                style="width:100%;"
                showTime
                dateFormat="YYYY-MM-DD HH:mm:ss"
                v-decorator="['userEntryTime']"
                placeholder="请选择入职时间"
              >
              </t-date>
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item
              label="排序"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input-number
                style="width: 100%;"
                placeholder="请输入排序"
                :min="1"
                :max="99999"
                v-decorator="['userSort', { initialValue: 1 }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col span="24">
            <a-form-item
              label="备注"
              :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }"
              :wrapperCol="{ xs: { span: 24 }, sm: { span: 22 } }"
            >
              <a-textarea
                placeholder="请输入备注"
                :auto-size="{ minRows: 3, maxRows: 5 }"
                v-decorator="['userRemark']"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
      <a-card title="个人资料" :bordered="false" style="width: 100%">
        <a-row>
          <a-row>
            <a-col>
              <a-form-item
                label="头像"
                :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }"
                :wrapperCol="{ xs: { span: 24 }, sm: { span: 22 } }"
              >
                <div class="userHeadPortraitBox">
                  <t-image-upload
                    ref="imageUpload"
                    url="/document/minio/uploadfile"
                    :limit="1"
                    :isMultiple="false"
                    :data="{ bucket: 'yx-cloud-vue' }"
                    v-decorator="['userHeadPortrait']"
                  />
                  <span class="userHeadPortraitText"
                    >请上传大小在100kb内的png格式的图片</span
                  >
                </div>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col span="12">
              <a-form-item
                label="用户生日"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <t-date
                  style="width:100%;"
                  v-decorator="['userBirthday']"
                  placeholder="请选择用户生日"
                >
                </t-date>
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item
                label="个性签名"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-input
                  v-decorator="['userPersonalSignature']"
                  placeholder="请输入个性签名"
                ></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col span="12">
              <a-form-item
                label="民族"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <t-dict-select-tag
                  type="select"
                  dictCode="UserNameFamily"
                  placeholder="请选择民族"
                  v-decorator="['userFamilyName']"
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item
                label="籍贯"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-input
                  v-decorator="['userNativePlace']"
                  placeholder="请输入籍贯"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col span="12">
              <a-form-item
                label="办公号码"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-input
                  v-decorator="['userTelephone']"
                  placeholder="请输入办公号码"
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item
                label="手机号码"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-input
                  placeholder="请输入手机号码"
                  v-decorator="[
                    'userCellphone',
                    {
                      rules: [
                        {
                          pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
                          maxLength: 11,
                          message: '请输入正确的手机号码！',
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col span="12">
              <a-form-item
                label="政治面貌"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <t-dict-select-tag
                  type="select"
                  dictCode="UserPoliticalOutlook"
                  placeholder="请选择政治面貌"
                  v-decorator="['politicalOutlook']"
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item
                label="文化程度"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <t-dict-select-tag
                  type="select"
                  dictCode="UserEducation"
                  placeholder="请选择文化程度"
                  v-decorator="['userEducation']"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col span="12">
              <a-form-item
                label="身份证号码"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-input
                  placeholder="请输入身份证号码"
                  v-decorator="[
                    'idCard',
                    {
                      rules: [
                        {
                          pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                          maxLength: 11,
                          message: '请输入正确的身份证号码！',
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item
                label="证件类型"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <t-dict-select-tag
                  type="select"
                  dictCode="UserIDType"
                  placeholder="请选择证件类型"
                  v-decorator="['idCardNo']"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col span="12">
              <a-form-item
                label="银行开户行"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <t-dict-select-tag
                  type="select"
                  dictCode="BankDepositBank"
                  placeholder="请选择银行开户行"
                  v-decorator="['depositBank']"
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item
                label="银行账号"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-input
                  v-decorator="['bankAccounts']"
                  placeholder="请输入银行账号"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-row>
      </a-card>
      <a-form-item class="hiddenItem">
        <t-dict-select-tag
          type="select"
          dictCode="UserInfoStatus"
          placeholder="请选择账号状态"
          v-decorator="[
            'userStatus',
            {
              initialValue: 'UserInfoStatus.03',
              rules: [{ required: true, message: '请选择账号状态！' }],
            },
          ]"
        />
      </a-form-item>
      <a-form-item class="hiddenItem">
        <t-dict-select-tag
          type="select"
          dictCode="UserLock"
          placeholder="请选择锁定状态"
          v-decorator="[
            'userLock',
            {
              initialValue: 'UserLock.02',
              rules: [{ required: true, message: '请选择锁定状态！' }],
            },
          ]"
        />
      </a-form-item>
      <a-form-item class="hiddenItem">
        <a-input v-decorator="['uuid']" disabled type="hidden" />
      </a-form-item>
    </a-form>
  </inline-Modal>
</template>

<script>
import pick from "lodash.pick";
import TMultiSelectTag from "@/components/TopVUI/dict/TMultiSelectTag";
import TreeSelect from "@/components/TopVUI/custom/TreeSelect";
import { getFilter } from "@/utils/TopVUI";
import DepartPopup from "@/components/TopVUI/custom/DepartPopup";
import { PersonnelPopup } from "@/components";
import ARow from "ant-design-vue/es/grid/Row";
import { TImageUpload, TDictSelectTag } from "@/components";
// 表单字段
const fields = [
  "uuid",
  "userName",
  "userNameId",
  "nickName",
  "userSex",
  "userAge",
  "userEmail",
  "userOrgId",
  "userReportsTo",
  "userPosition",
  "userGroup",
  "userEntryTime",
  "userStatus",
  "userLock",
  "userSort",
  "userRemark",
  "userHeadPortrait",
  "userBirthday",
  "userPersonalSignature",
  "userFamilyName",
  "userNativePlace",
  "userTelephone",
  "userCellphone",
  "politicalOutlook",
  "userEducation",
  "idCard",
  "idCardNo",
  "depositBank",
  "bankAccounts",
];
export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  components: {
    ARow,
    TMultiSelectTag,
    TreeSelect,
    TImageUpload,
    DepartPopup,
    PersonnelPopup,
    TDictSelectTag,
  },
  data() {
    return {
      title: "用户信息",
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 4,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 20,
        },
      },
      form: this.$form.createForm(this),
      authGroup: [],
      userGroup: "",
      dataAuth: "",
      urlAuth: {
        fathersUrl: "/system/sysRole/getListSysRole",
      },
      positionArr: [],
      positionList: [],
      authGroupArr: [],
      userPosition: "",
    };
  },
  created() {
    // 获取数据权限
    this.$post(this.urlAuth.fathersUrl).then((res) => {
      if (res.statusCode === 200) {
        this.authGroup = res.data;
      }
    });
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v));
    // 当 model 发生改变时，为表单设置值
    this.$watch("model", () => {
      this.positionArr = [];
      this.authGroupArr = [];
      if (this.model && JSON.stringify(this.model) != "{}") {
        this.positionArr = this.model?.userPosition.split(",");
        this.authGroupArr = this.model?.userGroup.split(",").map(parseFloat);
        this.userPosition = this.model?.userPosition;
        this.$nextTick(() => {
          this.$refs.imageUpload.fileList = [
            {
              url: this.model["userHeadPortrait"],
              uid: "1",
              name: "image.png",
              status: "done",
            },
          ];
          this.$refs.imageUpload.picUrl = true;
        });
      }
      this.model && this.form.setFieldsValue(pick(this.model, fields));
    });
  },
  methods: {
    // 新增编辑
    add(e, data) {
      data.forEach((item) => {
        if (item.id == e.orgId) {
          e.orgName = item.text;
        }
      });
      this.$nextTick(() => {
        let userGroup = e.userGroup ? e.userGroup.split(",") : "";
        this.form.setFieldsValue({
          ...e,
        });
      });
      this.positionList = [];
    },
    edit(e, data) {
      this.add(e, data);
    },
    departPopupChange(value, data) {
      if (value !== this.model.userOrgId || !value) {
        this.positionArr = [];
        this.form.setFieldsValue({ userPosition: "" });
        this.userPosition = "";
      }
      this.getPositionList(value);
    },
    //获取岗位列表
    getPositionList(orgId) {
      let value = {
        orgId: orgId,
      };
      this.$post("/mdata/sysPosition/getSysPositionListByOrgId", value).then(
        (res) => {
          if (orgId) {
            this.positionArr = this.userPosition
              ? this.userPosition.split(",")
              : [];
            this.form.setFieldsValue({ userPosition: this.userPosition });
          }
          this.positionList = res;
        }
      );
    },
    // 角色授权
    selectUserGroupName(value, node, extra) {
      this.form.setFieldsValue({
        userGroup: value.toString(),
      });
    },
    // 过滤
    getFilter(sourceData, children) {
      let arr = [];
      if (sourceData) {
        sourceData.forEach((e, index) => {
          children.forEach((c, index) => {
            if (e.id == c.pid) {
              c.key = c.id;
              c.children = c.state === "closed" ? [] : "";
              if (e.children) e.children.push(c);
            } else {
              c.key = c.id;
            }
          });
          if (e.children) {
            // 子级有数据的时候 循环添加数据
            getFilter(e.children, children);
          }
        });
        arr = sourceData;
      }
      return arr;
    },
    handlePositionChange(value) {
      this.form.setFieldsValue({ userPosition: value.join(",") });
    },
  },
};
</script>
<style lang="less" scoped="scoped">
.headText {
  font-size: 12px;
  color: red;
  position: absolute;
  top: 14px;
  left: 100px;
}

.userHeadPortraitBox {
  display: inline-flex;

  .ant-upload-picture-card-wrapper {
    flex: 1;
  }

  .userHeadPortraitText {
    flex: 2;
    font-size: 12px;
    color: red;
    line-height: 100px;
  }
}
</style>
